<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 顶部header -->
    <div class="header container">
        <div class="logo"></div>
        <ul class="nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">职业规划</a></li>
        </ul>
        <div class="search">
            <input type="text" value="请输入内容">
            <button></button>
        </div>
        <div class="username">
            <img src="./images/user.png" alt="">
            <span>用户名称</span>
        </div>
    </div>

    <!-- 中间 swiper -->
    <div class="swiper">
        <div class="container">
            <ul class="navbar">
                <li><a href="#">前端开发</a><em>&gt;</em></li>
                <li><a href="#">前端开发</a><em>&gt;</em></li>
                <li><a href="#">前端开发</a><em>&gt;</em></li>
                <li><a href="#">前端开发</a><em>&gt;</em></li>
                <li><a href="#">前端开发</a><em>&gt;</em></li>
                <li><a href="#">前端开发</a><em>&gt;</em></li>
                <li><a href="#">前端开发</a><em>&gt;</em></li>
                <li><a href="#">前端开发</a><em>&gt;</em></li>
                <li><a href="#">前端开发</a><em>&gt;</em></li>
            </ul>

            <div class="right-title">
                <h4 class="course-title">我的课程表</h4>
                <div class="list-box">
                    <ul>
                        <li>
                            <h4>继续学习<i>程序语言设计</i></h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习<i>程序语言设计</i></h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习<i>程序语言设计</i></h4>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>
                    <div class="all-course">全部课程</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 精品推荐 recommend -->
    <div class="recommend container">
        <ul>
            <li class="first"><a href="#">精品推荐</a></li>
            <li><a href="#">jquery</a></li>
            <li><a href="#">jquery</a></li>
            <li><a href="#">jquery</a></li>
            <li><a href="#">jquery</a></li>
            <li><a href="#">jquery</a></li>
            <li><a href="#">jquery</a></li>
        </ul>
        <a href="#" class="last">修改兴趣</a>
    </div>

    <!-- 课程列表 course-box -->
    <div class="course-box container">
        <div class="course-header clearfix">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <ul class="clearfix">
            <li>
                <a href="#">
                    <div class="img-box">
                        <img src="./images/pic.png" alt="">
                    </div>
                    <div class="info-title">
                        <h4>Android 网络图片加载框架详解</h4>
                        <p>高级 <em>· 300人学习</em></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="img-box">
                        <img src="./images/pic.png" alt="">
                    </div>
                    <div class="info-title">
                        <h4>Android 网络图片加载框架详解</h4>
                        <p>高级 <em>· 300人学习</em></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="img-box">
                        <img src="./images/pic.png" alt="">
                    </div>
                    <div class="info-title">
                        <h4>Android 网络图片加载框架详解</h4>
                        <p>高级 <em>· 300人学习</em></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="img-box">
                        <img src="./images/pic.png" alt="">
                    </div>
                    <div class="info-title">
                        <h4>Android 网络图片加载框架详解</h4>
                        <p>高级 <em>· 300人学习</em></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="img-box">
                        <img src="./images/pic.png" alt="">
                    </div>
                    <div class="info-title">
                        <h4>Android 网络图片加载框架详解</h4>
                        <p>高级 <em>· 300人学习</em></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="img-box">
                        <img src="./images/pic.png" alt="">
                    </div>
                    <div class="info-title">
                        <h4>Android 网络图片加载框架详解</h4>
                        <p>高级 <em>· 300人学习</em></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="img-box">
                        <img src="./images/pic.png" alt="">
                    </div>
                    <div class="info-title">
                        <h4>Android 网络图片加载框架详解</h4>
                        <p>高级 <em>· 300人学习</em></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="img-box">
                        <img src="./images/pic.png" alt="">
                    </div>
                    <div class="info-title">
                        <h4>Android 网络图片加载框架详解</h4>
                        <p>高级 <em>· 300人学习</em></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="img-box">
                        <img src="./images/pic.png" alt="">
                    </div>
                    <div class="info-title">
                        <h4>Android 网络图片加载框架详解</h4>
                        <p>高级 <em>· 300人学习</em></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="img-box">
                        <img src="./images/pic.png" alt="">
                    </div>
                    <div class="info-title">
                        <h4>Android 网络图片加载框架详解</h4>
                        <p>高级 <em>· 300人学习</em></p>
                    </div>
                </a>
            </li>
        </ul>
    </div>

    <!-- 编程入门 code -->
    <div class="code container clearfix">
        <div class="title-box">
            <h4>编程入门</h4>
            <ul>
                <li>热门</li>
                <li>初级</li>
                <li>中级</li>
                <li>特级</li>
            </ul>
            <a href="#">查看全部</a>
        </div>
        <div class="code-content">
            <div class="code-left">
                <img src="./images/induction.png" alt="">
            </div>
            <div class="code-right">
                <div class="code-right-header">
                    <img src="./images/happy.png" alt="">
                </div>
                <ul class="code-right-list">
                    <li>
                        <a href="#">
                            <div class="img-box">
                                <img src="./images/144.png" alt="">
                            </div>
                            <div class="info-title">
                                <h4>Android 网络图片加载框架详解</h4>
                                <p>高级 <em>· 300人学习</em></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="img-box">
                                <img src="./images/144.png" alt="">
                            </div>
                            <div class="info-title">
                                <h4>Android 网络图片加载框架详解</h4>
                                <p>高级 <em>· 300人学习</em></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="img-box">
                                <img src="./images/144.png" alt="">
                            </div>
                            <div class="info-title">
                                <h4>Android 网络图片加载框架详解</h4>
                                <p>高级 <em>· 300人学习</em></p>
                            </div>
                        </a>
                    </li>
                    <li class="last">
                        <a href="#">
                            <div class="img-box">
                                <img src="./images/144.png" alt="">
                            </div>
                            <div class="info-title">
                                <h4>Android 网络图片加载框架详解</h4>
                                <p>高级 <em>· 300人学习</em></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="code container clearfix">
        <div class="title-box">
            <h4>编程入门</h4>
            <ul>
                <li>热门</li>
                <li>初级</li>
                <li>中级</li>
                <li>特级</li>
            </ul>
            <a href="#">查看全部</a>
        </div>
        <div class="code-content">
            <div class="code-left">
                <img src="./images/induction.png" alt="">
            </div>
            <div class="code-right">
                <div class="code-right-header">
                    <img src="./images/happy.png" alt="">
                </div>
                <ul class="code-right-list">
                    <li>
                        <a href="#">
                            <div class="img-box">
                                <img src="./images/144.png" alt="">
                            </div>
                            <div class="info-title">
                                <h4>Android 网络图片加载框架详解</h4>
                                <p>高级 <em>· 300人学习</em></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="img-box">
                                <img src="./images/144.png" alt="">
                            </div>
                            <div class="info-title">
                                <h4>Android 网络图片加载框架详解</h4>
                                <p>高级 <em>· 300人学习</em></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="img-box">
                                <img src="./images/144.png" alt="">
                            </div>
                            <div class="info-title">
                                <h4>Android 网络图片加载框架详解</h4>
                                <p>高级 <em>· 300人学习</em></p>
                            </div>
                        </a>
                    </li>
                    <li class="last">
                        <a href="#">
                            <div class="img-box">
                                <img src="./images/144.png" alt="">
                            </div>
                            <div class="info-title">
                                <h4>Android 网络图片加载框架详解</h4>
                                <p>高级 <em>· 300人学习</em></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 底部 footer -->
    <div class="footer">
        <div class="container">
            <div class="footer-left">
                <div class="footer-logo">
                    <img src="./images/logo.png" alt="">
                </div>
                <div class="footer-info">
                    学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
                </div>
                <div class="footer-app">下载APP</div>
            </div>
            <dl class="footer-about">
                <dt>关于学成网</dt>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
            </dl>
            <dl class="footer-about">
                <dt>关于学成网</dt>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
            </dl>
            <dl class="footer-about">
                <dt>关于学成网</dt>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
                <dd>管理团队</dd>
            </dl>
        </div>
    </div>

</body>

</html>